<template>
    <div>
        <h1>用药列表</h1>
        <div>
            医生姓名
            <input type="text" v-model="queryInfo.doctorName">

            科室名称
            <select v-model="queryInfo.wardName">
                <option value="">请选择</option>
                <option :value="item.WardName" v-for="item in wardlist">{{ item.WardName }}</option>
            </select>

            <input type="button" value="查询" class="btn btn-info" @click="show">
            <input type="button" value="批量完成" class="btn btn-warning" @click="updstate">
        </div>

        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td><input type="checkbox" v-model="checked" @click="checkAll"></td>
                    <td>药品名称</td>
                    <td>科室</td>
                    <td>用药日期</td>
                    <td>病人姓名</td>
                    <td>病房号码</td>
                    <td>用药状态</td>
                    <td>配药医生</td>
                    <td>操作</td>
                </tr>

                <tr v-for="item in data.list" :key="item.MId">
                    <td><input type="checkbox" v-model="ids" :value="item.MId" @change="checkOne"></td>
                    <td>{{ item.Mname }}</td>
                    <td>{{ item.WardName }}</td>
                    <td>{{ moment(item.UseTime).format('YYYY-MM-DD') }}</td>
                    <td>{{ item.UserName }}</td>
                    <td>{{ item.HouseNumber }}</td>
                    <td>{{ item.UseState == 1 ? "未开始" : "已完成" }}</td>
                    <td>{{ item.DoctorName }}</td>
                    <td>
                        <input type="button" value="删除" class="btn btn-danger" @click="del(item.MId)">
                        <input type="button" value="修改" class="btn btn-primary" @click="upd(item.MId)">
                    </td>
                </tr>
            </tbody>
        </table>

        <div>
            <span>共{{ data.totalCount }}条</span>
            <span>共{{ data.totalPage }}页</span>
            <span>{{ queryInfo.pageIndex }}/{{ data.totalPage }}</span>

            <select v-model="queryInfo.pageSize" @change="show">
                <option :value="item" v-for="item in arr">每页{{ item }}条</option>
            </select>

            <input type="button" value="首页" class="btn btn-info" @click="getPage(1)">
            <input type="button" value="上一页" class="btn btn-info" @click="getPage(queryInfo.pageIndex - 1)">
            <span v-for="item in data.totalPage" :value="item" @click="getPage(item)">{{ item }}</span>
            <input type="button" value="下一页" class="btn btn-info" @click="getPage(queryInfo.pageIndex + 1)">
            <input type="button" value="尾页" class="btn btn-info" @click="getPage(data.totalPage)">

        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
import moment from 'moment';

//传递参数
const route = useRoute();
//跳转页面
const router = useRouter();

//声明一个变量接收前端传递的参数
let queryInfo: any = reactive({
    pageIndex: 1,
    pageSize: 2,
    doctorName: '',
    wardName: ''
})

//声明一个变量接收向后端传递的值
let data: any = reactive({
    totalCount: 0,
    totalPage: 0,
    list: []
})

//声明一个变量来绑定科室
let wardlist: any = ref([])

//声明一个变量存储页容量
let arr: any = ref([2, 4, 6, 8])

//声明一个变量控制第一个多选框选中与不选中
let checked: any = ref(false)

//声明一个变量控制多个多选框选中与不选中
let ids: any = ref([])

//生命周期钩子
onMounted(() => {
    getMedition()
    getWard()
})

//绑定科室
const getWard = () => {
    axios({
        url: '/api/Medition/GetWard',
        method: 'get'
    })
        .then(res => {
            console.log(res);
            wardlist.value = res.data
        })
        .catch(err => {
            console.log(err);

        })
}

//显示用药列表
const getMedition = () => {
    axios({
        url: '/api/Medition/ShowMedition',
        method: 'get',
        params: queryInfo
    })
        .then(res => {
            console.log(res);
            Object.assign(data, res.data)
        })
        .catch(err => {
            console.log(err);

        })
}

//分页
const getPage = (num: any) => {
    if (num < 1) {
        alert('页码不能为负数')
        queryInfo.pageIndex = 1;
        return
    }
    if (num > data.totalPage) {
        alert('页码不能超出最大范围')
        queryInfo.pageIndex = data.totalPage;
        return
    }
    queryInfo.pageIndex = num;
    getMedition()
}

//归零
const show = () => {
    queryInfo.pageIndex = 1;
    getMedition()
}

//全选全不选
const checkAll = () => {
    if (checked.value == false) {
        ids.value = data.list.map((item:any) => {
            return item.MId
        })
    }
    else {
        ids.value = []
    }
}

//反选
const checkOne = () => {
    if (ids.value.length == data.list.length) {
        checked.value = true
    }
    else {
        checked.value = false
    }
}

//删除
const del = (id: any) => {
    let f = confirm('确认删除该用药记录吗？')
    if (f) {
        axios({
            url: '/api/Medition/DelMedition',
            method: 'delete',
            params: {
                id: id
            }
        })
            .then(res => {
                console.log(res);
                if (res.data > 0) {
                    alert('删除成功')
                    getMedition()
                }
                else {
                    alert('删除失败')
                    return
                }
            })
            .catch(err => {
                console.log(err);

            })
    }
}

//批量完成
const updstate=()=>{
    if(ids.value.length==0){
        alert('请至少选择一项')
        return
    }
    let f = confirm('确认修改状态吗？')
    if (f) {
        axios({
            url: '/api/Medition/UpdState',
            method: 'put',
            params: {
                ids:ids.value.toString()
            }
        })
            .then(res => {
                console.log(res);
                if (res.data > 0) {
                    alert('修改成功')
                    checked.value=false
                    ids.value=[]
                    getMedition()
                }
                else {
                    alert('修改失败')
                    checked.value=false
                    ids.value=[]
                    return
                }
            })
            .catch(err => {
                console.log(err);

            })
    }
}

//修改
const upd=(id:any)=>{
    router.push({
        path:'/updMedition',
        query:{
            id:id
        }
    })
}
</script>

<style scoped>
input {
    margin: 0 10px;
}

span {
    margin: 0 10px;
}
</style>